<html> 
    <head> 
        <title></title> 
        <link rel="stylesheet" type="text/css" href="css/present.css" /> 
<script type="text/javascript">
$(function() {
   $(".hide").hide();
   sub = { index:0, steps: [], step: function() {sub.steps[sub.index++]();}};
   sub.next= function () { return sub.index >= sub.steps.length };
   sub.steps.push(function() {$(".stepaa").show();});
   sub.steps.push(function() {$(".stepaa").animate({width:0, height: 0}, 1000, function() {$(this).hide();$(".stepb").show();});});
   sub.steps.push(function() {$(".stepc").show();});
   sub.steps.push(function() {$(".stepa, .stepb, .stepc").animate({'height': 0}, 1000, function() { 
            $(this).hide();}); $(".step0").show();});
    sub.steps.push(function() {
        timers.queue({
            stretchSketch: StretchSketch.load({url: '../../animation/iepad.jsvg', showOnInit: false })
            , endTime: 7000
            , timePoints: JSON.parse('{"iepad.een.x" : " 0: 0, 1000: 80" , "iepad.twee.y": "1000:0, 2000: 40", "iepad.drie.x" : "2000: 0, 3000: 50", "iepad.drie.y" : "2000: 0, 3000: -40", "iepad.vier.x" : "3000: 0, 4000: -50", "iepad.vier.y" : "3000: 0, 4000: -40", "iepad.vijf.y": "4000:0, 6000: 30"}')});

       timers.nextSketch(80);
   });
   sub.steps.push(function() {timers.stop(); $(".step0 svg").animate({'height': 0}, 1000, function() { $(this).hide(); $(".step1").show();}); });
   sub.steps.push(function() {$(".step2").show();});
   sub.steps.push(function() {$(".step0").animate({'height': 0}, 1000, function() { $(this).hide();}); $(".step2b").show();});
   sub.steps.push(function() {$(".step2c").show();});
   sub.steps.push(function() {$(".step3").show();});
});
</script>

    </head> 
<body class="jsxgraph_body"> 
<ul> 
<li class="stepa">SVG's dPath is like graphic assembler.</li>
<li class="stepaa hide"><pre style="width :600px;font-size: 1.0em;white-space: pre-wrap">
&lt;path id="ribbons" d="M 140.000 180.000 l 6 0 m 6 0 l 6 0 m 6 0 l 6 0 m 6 0 l 6 0 m 6 0 l 6 0 m 6 0 l 6 0 m 6 0 l 6 0 m 6 0 l 6 0 m 6 0 l 6 0 m 6 0 l 6 0 m 6 0 l 6 0 m 6 0 l 6 0 m 6 0 l 3 0 m 3 0 l 0 6 m 0 6 l 0 6 m 0 6 l 0 6 m 0 6 l 0 6 m 0 6 l 0 6 m 0 6 l 0 6 m 0 6 l 0 6 m 0 6 l 0 6 m 0 6 l 0 6 m 0 6 l 0 6 m 0 6 l 0 6 m 0 6 l 0 6 m 0 6 l 0 3 m 0 3 l -6 0 m -6 0 l -6 0 m -6 0 l -6 0 m -6 0 l -6 0 m -6 0 l -6 0 m -6 0 l -6 0 m -6 0 l -6 0 m -6 0 l -6 0 m -6 0 l -6 0 m -6 0 l -6 0 m -6 0 l -6 0 m -6 0 l -6 0 m -6 0 l -3 0 m -3 0 l 0 -6 m 0 -6 l 0 -6 m 0 -6 l 0 -6 m 0 -6 l 0 -6 m 0 -6 l 0 -6 m 0 -6 l 0 -6 m 0 -6 l 0 -6 m 0 -6 l 0 -6 m 0 -6 l 0 -6 m 0 -6 l 0 -6 m 0 -6 l 0 -6 m 0 -6 l 0 -6 m 0 -6 l 0 -3 m 0 -3 l -6 0 m -6 0 l -6 0 m -6 0 l -6 0 m -6 0 l -6 0 m -6 0 l -6 0 m -6 0 l -6 0 m -6 0 l -6 0 m -6 0 l -6 0 m -6 0 l -2 0 m -2 0 l 0 -70.000 l 70.000 0 l 30.000 70.000 m -100.000 0c -25.000 0 -25.000 0 -25.000 30.000 l 0 90.000 c 0 30.000 0 30.000 25.000 30.000 l 0 -6 m 0 -6 l 0 -6 m 0 -6 l 0 -6 m 0 -6 l 0 -6 m 0 -6 l 0 -6 m 0 -6 l 0 -6 m 0 -6 l 0 -6 m 0 -6 l 0 -6 m 0 -6 l 0 -6 m 0 -6 l 0 -6 m 0 -6 l 0 -6 m 0 -6 l 0 -6 m 0 -6 l 0 -3 m 0 -3 m 0 150.000 l 0 70.000 l 70.000 0 l 30.000 -70.000 m -100.000 0 l 6 0 m 6 0 l 6 0 m 6 0 l 6 0 m 6 0 l 6 0 m 6 0 l 6 0 m 6 0 l 6 0 m 6 0 l 6 0 m 6 0 l 6 0 m 6 0 l 2 0 m 2 0 m 150.000 0 l 6 0 m 6 0 l 6 0 m 6 0 l 6 0 m 6 0 l 6 0 m 6 0 l 6 0 m 6 0 l 6 0 m 6 0 l 6 0 m 6 0 l 6 0 m 6 0 l 2 0 m 2 0 l 0 70.000 l -70.000 0 l -30.000 -70.000 m 100.000 0c 25.000 0 25.000 0 25.000 -30.000 l 0 -90.000 c 0 -30.000 0 -30.000 -25.000 -30.000 l 0 6 m 0 6 l 0 6 m 0 6 l 0 6 m 0 6 l 0 6 m 0 6 l 0 6 m 0 6 l 0 6 m 0 6 l 0 6 m 0 6 l 0 6 m 0 6 l 0 6 m 0 6 l 0 6 m 0 6 l 0 6 m 0 6 l 0 6 m 0 6 l 0 3 m 0 3 m 0 -150.000 l 0 -70.000 l -70.000 0 l -30.000 70.000 m 100.000 0 l -6 0 m -6 0 l -6 0 m -6 0 l -6 0 m -6 0 l -6 0 m -6 0 l -6 0 m -6 0 l -6 0 m -6 0 l -6 0 m -6 0 l -6 0 m -6 0 l -2 0 m -2 0 l 0 -100.000c 0 -25.000 0 -25.000 -30.000 -25.000 l -90.000 0 c -30.000 0 -30.000 0 -30.000 25.000 l 6 0 m 6 0 l 1.500 0 m 1.500 0 l 120.000 0 l 6 0 m 6 0 l 1.500 0 m 1.500 0 m -150.000 0l 0 100.000m 0 150.000l 0 100.000 l 6 0 m 6 0 l 6 0 m 6 0 l 6 0 m 6 0 l 6 0 m 6 0 l 6 0 m 6 0 l 6 0 m 6 0 l 6 0 m 6 0 l 6 0 m 6 0 l 6 0 m 6 0 l 6 0 m 6 0 l 6 0 m 6 0 l 6 0 m 6 0 l 3 0 m 3 0l 0 150.000 l -16.500 0 l -6 0 m -6 0 l -6 0 m -6 0 l -6 0 m -6 0 l -6 0 m -6 0 l -6 0 m -6 0 l -6 0 m -6 0 l -6 0 m -6 0 l -6 0 m -6 0 l -6 0 m -6 0 l -4.500 0 m -4.500 0 l -16.500 0c 0 25.000 0 25.000 30.000 25.000 l 90.000 0 c 30.000 0 30.000 0 30.000 -25.000 m -150.000 0 l 0 -150.000 m 150.000 0 l 0 -100.000"&gt;&lt;/path&gt;&lt;/g&gt;&lt;/svg&gt;
</pre></li>
<li class="stepb hide">Therefor iIntroduce:</li>
<li class="stepc hide"><div><span style="font-size: 2.5em; color: red">iPath !!</li>
<li class="step0 hide">iPath is a Javascript object favouring method chaining. Use it like: <span class="code"><pre>stretchbox = new iPath().line(80, 0).line({y:40}).line(50,40)
.line(-50,-40).line(0,30);</pre></span>A list of all functionality is available on the website (tutorial).
<svg version="1.1" width="" height="" id="iepad1">
</svg>
</li>
<li class="step0a hide">it's main function is to drive an "operating head" (laser, router bit, waterjet, pencil)</li>
<li class="step1 hide">To display a heart<p>
<img src="images/heart.jpg" id="step1b"></li>
<li class="step2 hide">First create left side:<div class="code">(heart = new iPath()).Move(30,40).bezier(0, -50, -150, -200, 0, -120)</div>
     <div class="step2b hide">Then take the symmetry (around the y axis)<div class="step2c hide code">concat(heart.reverse(heart).reflect({y:1}));</div></div></li>
<li class="step3 hide">To display this inside a path you still need iscriptdesign's directives:<p>
<div class="code"><pre> &lt;path d="#{heart.dPath()}"/&gt;</pre></div>
</ul>
</body>
</html>
